<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 合成</title>
    <style>
      body{
        background: #666;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      canvas{
        background: #fff;
      }
      h1{
        color: #fff;
        font-size: 24px;
      }
    </style>
</head>
<body>
    <h1>合成</h1>
    <canvas id="drawing" width="500" height="500" ></canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        var drawing = document.getElementById('drawing')
        if (drawing.getContext) {
          const ctx = drawing.getContext('2d');
          
          const drawTable = () => {
            for (let i = 0; i < drawing.width / 10; i++) {
              let speed = 20;
              ctx.beginPath();
              // row
              ctx.moveTo(0, i * speed);             //创建一个起点
              ctx.lineTo(drawing.width, i * speed);
              // column
              ctx.moveTo(i * speed, 0);
              ctx.lineTo(i * speed, drawing.height);
              ctx.strokeStyle = 'rgba(0,0,0,.2)';
              ctx.stroke();
              ctx.closePath();
            }
          }
          drawTable()

          // ----------------------------------------
          // 设置透明度
          // ctx.globalAlpha = 1

          // // 绘制图形
          // ctx.fillStyle = 'red'
          // ctx.fillRect(
          //   100, 100,
          //   300, 300
          // )
          // ----------------------------------------

          // ------------------------------
          // 合并方式 整理 canvas 知识体系
          ctx.fillStyle = '#ff0000'
          ctx.fillRect(50,50, 200,200)

          // 后绘制的覆盖先绘制的
          // ctx.globalCompositeOperation = 'source-over' // 后绘制的覆盖先绘制的
          // ctx.globalCompositeOperation = 'source-in'   // 仅绘制交叉部分
          ctx.globalCompositeOperation = 'source-out'  // 后绘制的图形 - 先绘制的图形: 剩下后绘制的图形
          // ctx.globalCompositeOperation = 'source-atop' // 先绘制的图形 + 重叠部分 - 后绘制的不重叠部分
          
          // 先绘制的覆盖后绘制的
          // ctx.globalCompositeOperation = 'destination-over'    // 先绘制的覆盖后绘制的
          // ctx.globalCompositeOperation = 'destination-in'      // 仅绘制交叉部分
          // ctx.globalCompositeOperation = 'destination-out'     // 重叠部分被擦除
          // ctx.globalCompositeOperation = 'destination-atop'    // 后绘制的图形在先绘制图形的下方, 在两者不重叠的地方, 先绘制的图形会变透明

          // 其他
          // ctx.globalCompositeOperation = 'lighter'   //重叠部分, 颜色相加
          // ctx.globalCompositeOperation = 'copy'      // 后绘制的图形完全取代先绘制的图形
          // ctx.globalCompositeOperation = 'xor'       // 组合图形, 重叠部分变成白色

          ctx.fillStyle = 'rgba(0,0,255,1)'
          ctx.fillRect(150,150,200,200)

          // ------------------------------
         }
    </script>
</body>
</html>
